<template>
  <div class="community-container">
    <div class="background-wrapper"></div>
    <div class="content">
      <!-- 导航栏组件 -->
      <Navbar />

      <!-- 社区页面主要内容 -->
      <section class="community-main">
        <div class="community-content">
          <h2 class="page-title">创作社区</h2>
          <p class="page-description">
            与全球创作者分享您的AI艺术作品，参与每日主题挑战，发现更多灵感，与志同道合的创作者交流互动。
          </p>
          
          <!-- 社区功能区域 -->
          <div class="community-features">
            <div class="feature-card">
              <div class="feature-icon">🏆</div>
              <h3>主题挑战</h3>
              <p>参与每日创作挑战，赢取奖励</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">👥</div>
              <h3>创作者交流</h3>
              <p>与全球创作者分享经验和技巧</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">🔥</div>
              <h3>热门作品</h3>
              <p>发现社区中最受欢迎的创作</p>
            </div>
          </div>
          
          <!-- 每日主题展示区域 -->
          <div class="daily-theme-section">
            <h3>今日主题挑战</h3>
            <div class="theme-content">
              <div class="theme-info">
                <div class="theme-header">
                  <span class="theme-tag">每日挑战</span>
                  <span class="theme-time">剩余时间: {{ timeRemaining }}</span>
                </div>
                <h4 class="theme-title">"{{ currentTheme.title }}"</h4>
                <p class="theme-description">
                  {{ currentTheme.description }}
                </p>
                <div class="theme-stats">
                  <span class="stat-item">参赛作品: {{ currentTheme.participationCount }}</span>
                  <span class="stat-item">参与人数: {{ currentTheme.participantCount }}</span>
                </div>
              </div>
              <div class="theme-actions">
                <button class="participate-btn" @click="showSubmissionModal = true">参与挑战</button>
                <button class="explore-btn" @click="viewAllSubmissions">查看所有作品</button>
              </div>
            </div>
          </div>
          
          <!-- 作品上传区域 -->
          <div class="upload-section" v-if="showSubmissionModal">
            <div class="modal-overlay" @click="showSubmissionModal = false">
              <div class="upload-modal" @click.stop>
                <div class="modal-header">
                  <h3>提交作品</h3>
                  <button class="close-btn" @click="showSubmissionModal = false">×</button>
                </div>
                <div class="modal-body">
                  <div class="form-group">
                    <label>作品类型</label>
                    <select v-model="submission.type">
                      <option value="painting">AI绘画</option>
                      <option value="music">AI音乐</option>
                      <option value="writing">AI写作</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label>作品标题</label>
                    <input type="text" v-model="submission.title" placeholder="请输入作品标题">
                  </div>
                  <div class="form-group">
                    <label>作品描述</label>
                    <textarea v-model="submission.description" placeholder="请描述您的作品创作思路"></textarea>
                  </div>
                  <div class="form-group">
                    <label>上传作品</label>
                    <div class="upload-area" @click="triggerFileUpload">
                      <div v-if="!submission.file">点击上传作品文件</div>
                      <div v-else>{{ submission.file.name }}</div>
                      <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none;">
                    </div>
                  </div>
                  <div class="form-actions">
                    <button class="submit-btn" @click="submitWork">提交作品</button>
                    <button class="cancel-btn" @click="showSubmissionModal = false">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 作品展示区域 -->
          <div class="gallery-section">
            <div class="section-header">
              <h3>社区热门作品</h3>
              <div class="filter-tabs">
                <button :class="{ active: activeFilter === 'all' }" @click="activeFilter = 'all'">全部</button>
                <button :class="{ active: activeFilter === 'painting' }" @click="activeFilter = 'painting'">绘画</button>
                <button :class="{ active: activeFilter === 'music' }" @click="activeFilter = 'music'">音乐</button>
                <button :class="{ active: activeFilter === 'writing' }" @click="activeFilter = 'writing'">写作</button>
              </div>
            </div>
            <div class="gallery-grid">
              <div class="gallery-item" v-for="work in filteredWorks" :key="work.id">
                <div class="work-type-badge" :class="work.type">{{ getWorkTypeLabel(work.type) }}</div>
                <div class="work-preview">
                  <div v-if="work.type === 'painting'" class="preview-placeholder">🎨</div>
                  <div v-else-if="work.type === 'music'" class="preview-placeholder">🎵</div>
                  <div v-else class="preview-placeholder">📚</div>
                </div>
                <div class="work-info">
                  <h4>{{ work.title }}</h4>
                  <div class="work-meta">
                    <span class="author">创作者: {{ work.author }}</span>
                    <div class="work-actions">
                      <button class="action-btn like-btn" @click="toggleLike(work)" :class="{ liked: work.liked }">
                        👍 {{ work.likes }}
                      </button>
                      <button class="action-btn comment-btn" @click="viewComments(work)">
                        💬 {{ work.comments }}
                      </button>
                    </div>
                  </div>
                  <p class="work-description">{{ work.description }}</p>
                  <div class="work-tags">
                    <span class="tag" v-for="tag in work.tags" :key="tag">{{ tag }}</span>
                  </div>
                  <div class="ai-style-section">
                    <button class="extract-style-btn" @click="extractStyle(work)">
                      提取风格
                    </button>
                    <span class="style-info" v-if="work.extractedStyle">已提取: {{ work.extractedStyle }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 风格应用区域 -->
          <div class="style-application-section">
            <h3>AI风格应用</h3>
            <div class="style-content">
              <div class="saved-styles">
                <h4>我的收藏风格</h4>
                <div class="styles-grid">
                  <div class="style-card" v-for="style in savedStyles" :key="style.id">
                    <div class="style-preview">
                      <div class="preview-placeholder">🎨</div>
                    </div>
                    <div class="style-info">
                      <h5>{{ style.name }}</h5>
                      <p>{{ style.description }}</p>
                      <div class="style-actions">
                        <button class="apply-btn" @click="applyStyle(style)">应用</button>
                        <button class="remove-btn" @click="removeStyle(style.id)">删除</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="style-application-form">
                <h4>应用到创作</h4>
                <div class="form-group">
                  <label>选择创作类型</label>
                  <select v-model="styleType">
                    <option value="painting">AI绘画</option>
                    <option value="music">AI音乐</option>
                    <option value="writing">AI写作</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>描述您的创作想法</label>
                  <textarea v-model="creationIdea" placeholder="请描述您想要创作的内容..."></textarea>
                </div>
                <div class="form-group">
                  <label>选择要应用的风格</label>
                  <select v-model="selectedStyle">
                    <option v-for="style in savedStyles" :key="style.id" :value="style.id">
                      {{ style.name }}
                    </option>
                  </select>
                </div>
                <button class="create-with-style-btn" @click="createWithStyle">开始创作</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 底部 -->
      <footer class="footer">
        <p>© 2025 AI 艺术创作平台 - 让创意无界，让 AI 赋能艺术创作</p>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Navbar from '../components/Navbar.vue'

const router = useRouter()

// 社区相关数据
// 切换过滤器
const activeFilter = ref('all')
const showSubmissionModal = ref(false)
const fileInput = ref<HTMLInputElement | null>(null)

// 当前主题
const currentTheme = ref({
  title: "秋日森林",
  description: "以秋日森林为主题，创作一幅描绘金黄色落叶、温暖阳光和宁静森林的作品。可以是绘画、音乐或文字形式，展现秋日森林的美丽与宁静。",
  participationCount: 128,
  participantCount: 86
})

// 剩余时间
const timeRemaining = ref("12小时30分钟")

// 作品提交表单
const submission = ref({
  type: 'painting',
  title: '',
  description: '',
  file: null as File | null
})

// 社区作品数据
const communityWorks = ref([
  {
    id: 1,
    title: "金秋森林",
    type: "painting",
    author: "Alice",
    likes: 245,
    comments: 32,
    description: "使用温暖的橙色和黄色调描绘秋日森林的美景",
    tags: ["秋日", "森林", "温暖"],
    liked: false,
    extractedStyle: "温暖秋日风格"
  },
  {
    id: 2,
    title: "星空下的旋律",
    type: "music",
    author: "Bob",
    likes: 189,
    comments: 24,
    description: "一首描绘夜空繁星的轻柔钢琴曲",
    tags: ["星空", "钢琴", "宁静"],
    liked: true,
    extractedStyle: ""
  },
  {
    id: 3,
    title: "时间旅行者",
    type: "writing",
    author: "Carol",
    likes: 156,
    comments: 18,
    description: "一篇关于穿越不同时代的科幻小说片段",
    tags: ["科幻", "时间旅行", "冒险"],
    liked: false,
    extractedStyle: ""
  },
  {
    id: 4,
    title: "海底世界",
    type: "painting",
    author: "David",
    likes: 134,
    comments: 15,
    description: "描绘神秘海底世界的水彩画作品",
    tags: ["海洋", "水彩", "神秘"],
    liked: false,
    extractedStyle: ""
  }
])

// 保存的风格
const savedStyles = ref([
  {
    id: 1,
    name: "温暖秋日风格",
    description: "以橙色和黄色为主调的温暖风格",
    type: "painting"
  },
  {
    id: 2,
    name: "宁静星空风格",
    description: "以深蓝色和银色为主调的宁静风格",
    type: "music"
  }
])

// 风格应用表单
const styleType = ref('painting')
const creationIdea = ref('')
const selectedStyle = ref(1)

// 计算属性获取当前路由
const currentRoute = computed(() => router.currentRoute.value.path)

// 过滤作品
const filteredWorks = computed(() => {
  if (activeFilter.value === 'all') {
    return communityWorks.value
  }
  return communityWorks.value.filter(work => work.type === activeFilter.value)
})

// 获取作品类型标签
const getWorkTypeLabel = (type: string) => {
  const labels: Record<string, string> = {
    painting: '绘画',
    music: '音乐',
    writing: '写作'
  }
  return labels[type] || type
}

// 触发文件上传
const triggerFileUpload = () => {
  if (fileInput.value) {
    fileInput.value.click()
  }
}

// 处理文件上传
const handleFileUpload = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    submission.value.file = target.files![0] as File
  }
}

// 提交作品
const submitWork = () => {
  if (!submission.value.title || !submission.value.description) {
    alert('请填写作品标题和描述')
    return
  }
  
  // 模拟提交成功
  alert('作品提交成功！')
  showSubmissionModal.value = false
  
  // 重置表单
  submission.value = {
    type: 'painting',
    title: '',
    description: '',
    file: null
  }
}

// 查看所有作品
const viewAllSubmissions = () => {
  // 跳转到作品展示页面或展开更多作品
  console.log('查看所有作品')
}

// 点赞功能
const toggleLike = (work: any) => {
  work.liked = !work.liked
  work.likes += work.liked ? 1 : -1
}

// 查看评论
const viewComments = (work: any) => {
  // 打开评论区域或跳转到评论页面
  console.log('查看评论', work.id)
}

// 提取风格
const extractStyle = (work: any) => {
  // 模拟AI风格提取
  work.extractedStyle = "提取风格成功"
  alert(`已成功提取"${work.title}"的风格`)
}

// 应用风格
const applyStyle = (style: any) => {
  selectedStyle.value = style.id
  alert(`已选择"${style.name}"风格，可在创作时应用`)
}

// 移除风格
const removeStyle = (styleId: number) => {
  const index = savedStyles.value.findIndex(s => s.id === styleId)
  if (index !== -1) {
    savedStyles.value.splice(index, 1)
    alert('风格已删除')
  }
}

// 使用风格创作
const createWithStyle = () => {
  if (!creationIdea.value) {
    alert('请描述您的创作想法')
    return
  }
  
  if (!selectedStyle.value) {
    alert('请选择要应用的风格')
    return
  }
  
  // 根据选择的类型跳转到相应的创作页面
  switch (styleType.value) {
    case 'painting':
      router.push('/painting')
      break
    case 'music':
      router.push('/music')
      break
    case 'writing':
      router.push('/writing')
      break
  }
  
  alert('已应用风格,开始创作吧!')
}

// 组件挂载时的初始化
onMounted(() => {
  // 可以在这里获取用户信息、主题信息等
  console.log('社区页面已加载')
})
</script>

<style scoped>
.community-container {
  position: relative;
  min-height: 100vh;
  width: 100vw;
}

.background-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 纯白色背景 */
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* 导航栏样式 */
.navbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.nav-content {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo h1 {
  font-size: 24px;
  color: #667eea;
  font-weight: 600;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-links a {
  color: #333;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.3s;
  position: relative;
  padding: 8px 0;
}

.nav-links a:hover {
  color: #667eea;
}

.nav-links a.active {
  color: #667eea;
  font-weight: 600;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #667eea;
  border-radius: 1px;
}

/* 下拉菜单 */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background: white;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 0;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: #333;
  padding: 12px 24px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: all 0.3s;
}

.dropdown-content a:hover {
  background: #f5f5f5;
  color: #667eea;
}

.dropdown:hover .dropbtn {
  color: #667eea;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

/* 用户头像按钮样式 */
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 用户信息悬浮面板 */
.user-profile-popup {
  position: absolute;
  top: 50px;
  right: 0;
  width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 12px;
}

.profile-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.profile-details {
  margin-bottom: 20px;
}

.profile-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.profile-item:last-child {
  margin-bottom: 0;
}

.item-label {
  color: #666;
  font-size: 14px;
}

.item-value {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-action-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.profile-action-btn:hover {
  background: #f5f5f5;
}

.profile-action-btn.logout {
  background: #fff5f5;
  color: #e53e3e;
}

.profile-action-btn.logout:hover {
  background: #ffebee;
}

.login-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  background: #667eea;
  color: white;
}

.login-btn:hover {
  background: #5568d3;
}

/* 社区页面主要内容 */
.community-main {
  width: 100vw;
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.community-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  color: #2D3E40;
  text-align: center;
  margin-bottom: 16px;
}

.page-description {
  font-size: 18px;
  color: #4A4A4A;
  text-align: center;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* 社区功能 */
.community-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.feature-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.feature-card p {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}

/* 每日主题 */
.daily-theme-section {
  margin-bottom: 60px;
}

.daily-theme-section h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.theme-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

.theme-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.theme-tag {
  background: #667eea;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.theme-time {
  color: #666;
  font-size: 14px;
}

.theme-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.theme-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}

.theme-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.stat-item {
  font-size: 14px;
  color: #666;
}

.theme-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.participate-btn, .explore-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.participate-btn {
  background: #667eea;
  color: white;
}

.participate-btn:hover {
  background: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.explore-btn {
  background: #f5f5f5;
  color: #666;
}

.explore-btn:hover {
  background: #e8e8e8;
  transform: translateY(-2px);
}

/* 作品上传模态框 */
.upload-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-modal {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 6px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: #667eea;
  background: #f9f9ff;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.submit-btn, .cancel-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn {
  background: #667eea;
  color: white;
}

.submit-btn:hover {
  background: #5568d3;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.cancel-btn:hover {
  background: #e8e8e8;
}

/* 作品展示 */
.gallery-section {
  margin-top: 60px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.filter-tabs {
  display: flex;
  gap: 10px;
}

.filter-tabs button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: #f0f0f0;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-tabs button.active,
.filter-tabs button:hover {
  background: #667eea;
  color: white;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  background: white;
  position: relative;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.work-type-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  z-index: 2;
}

.work-type-badge.painting {
  background: #667eea;
}

.work-type-badge.music {
  background: #ff6b6b;
}

.work-type-badge.writing {
  background: #4ecdc4;
}

.work-preview {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
}

.preview-placeholder {
  font-size: 48px;
}

.work-info {
  padding: 20px;
}

.work-info h4 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.work-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.author {
  font-size: 14px;
  color: #666;
}

.work-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.like-btn:hover,
.like-btn.liked {
  background: #fff5f5;
  color: #ff6b6b;
}

.comment-btn:hover {
  background: #f0f9ff;
  color: #667eea;
}

.work-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.tag {
  background: #f0f0f0;
  color: #666;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
}

.ai-style-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.extract-style-btn {
  padding: 6px 12px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.extract-style-btn:hover {
  background: #5568d3;
}

.style-info {
  font-size: 12px;
  color: #666;
}

/* 风格应用 */
.style-application-section {
  margin: 60px 0;
}

.style-application-section h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.style-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.saved-styles h4,
.style-application-form h4 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.styles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.style-card {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
}

.style-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.style-preview {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
}

.style-info {
  padding: 15px;
}

.style-info h5 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.style-info p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.4;
}

.style-actions {
  display: flex;
  gap: 10px;
}

.apply-btn, .remove-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.apply-btn {
  background: #667eea;
  color: white;
}

.apply-btn:hover {
  background: #5568d3;
}

.remove-btn {
  background: #f5f5f5;
  color: #666;
}

.remove-btn:hover {
  background: #e8e8e8;
}

.style-application-form {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.create-with-style-btn {
  width: 100%;
  padding: 14px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 15px;
}

.create-with-style-btn:hover {
  background: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

/* 底部 */
.footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 40px 24px;
  margin-top: 80px;
  width: 100%;
}

.footer p {
  font-size: 14px;
  opacity: 0.8;
}

/* 响应式 */
@media (max-width: 992px) {
  .style-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .theme-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .theme-actions {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .community-features {
    grid-template-columns: 1fr;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .filter-tabs {
    align-self: stretch;
  }
  
  .filter-tabs button {
    flex: 1;
    text-align: center;
  }
  
  .page-title {
    font-size: 28px;
  }
  
  .page-description {
    font-size: 16px;
  }
  
  .theme-stats {
    flex-direction: column;
    gap: 10px;
  }
}
</style>

